<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:33:04
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-13 23:50:26
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header>
        <span>分类管理</span>
      </template>

      <!-- tree -->
      <el-tree
        :data="menuList"
        :props="defaultProps"
        highlight-current
        @node-click="handleNodeClick"
        node-key="id"
      >
        <template #default="{ node, data }">
          <div class="tree-node">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                :icon="data.icon_name"
                @click.stop="onChangeIcon(data)"
                size="small"
                type="warning"
                >图标</el-button
              >
              <el-button
                icon="Edit"
                @click.stop="onEdit(data)"
                size="small"
                type="primary"
                >编辑</el-button
              >
              <el-button
                icon="Plus"
                @click.stop="onAdd(data)"
                size="small"
                type="success"
                >添加</el-button
              >
              <el-button
                icon="Delete"
                @click.stop="onRemove(data)"
                size="small"
                type="danger"
                >删除</el-button
              >
              <span
                >显示序号：<el-tag>{{ data.menu_order }}</el-tag>
              </span>
            </span>
          </div>
        </template>
      </el-tree>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { menu } from "@/api";

let menuList = (await menu.all({ type: "tree" })).data;
let defaultProps = { label: "name" };

console.log(menuList);
</script>

<style lang='less' scoped>
.tree-node {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

